<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14-显示隐藏之overflow溢出隐藏</title>
  <style>
    .peppa {
      
      width: 200px;
      height: 200px;
      margin: 100px auto;
      border: 1px solid red;

      /* 1. hidden: 超出div长度部分隐藏 */
      /* overflow: hidden; */

      /* 2. scroll: 超出部分使用滚动条 */
      /* overflow: scroll; */

      /* 3. auto: 自动匹配，溢出的时候显示滚动条，不溢出的情况正常显示 */
      overflow: auto; 
    }
  </style>

</head>

<body>

  <div class="peppa">
    1、佩奇：佩奇是一只复非常可爱的小猪，她最喜欢跳泥坑，最喜欢吃的是意大利面和巧克力蛋糕，最喜欢扮成小仙女公主。

    2、乔治：佩奇的弟弟，已经上幼儿园了。活泼调皮，喜欢吃意大利面和巧克力蛋糕，喜欢喝果汁，最最喜欢的是恐龙。
  </div>

</body>

</html>